<template>
  <div>
    <!-- 选择类型 -->
    <div class="top">
      <yd-flexbox>
        <!-- <yd-flexbox-item class="text-center"> -->
          <!-- 删除图标 -->
          <!-- <div v-if="show2 == true" style="text-align:center" @click="del">
            <hd-svg-icon name="hd-yduishanchu" slot="left" size="20px" color="#000"></hd-svg-icon>
          </div> -->
        <!-- </yd-flexbox-item> -->
        <yd-flexbox-item class="text-center" @click.native="show1 = true">
          <span>{{title}}</span>
              <!-- 下箭头图标 -->
          <!-- <span>
            <hd-svg-icon name="hd-arrow" slot="left" size="20px" color="#000"></hd-svg-icon>
          </span>             -->
        </yd-flexbox-item>
        <!-- <yd-flexbox-item class="text-right" @click.native="show2 = !show2">
          <span class="edit">编辑</span>
        </yd-flexbox-item> -->
      </yd-flexbox>
    </div>
    <!-- 选择状态 -->
    <yd-tab :callback='load'>
        <yd-tab-panel label="酒店" tabkey="0" active></yd-tab-panel>
        <yd-tab-panel label="线路" tabkey="1"></yd-tab-panel>
        <yd-tab-panel label="景区" tabkey="2"></yd-tab-panel>
    </yd-tab>

    <div class="comment-body" v-for="item in list" :key="item.index" slot="list">   
      <yd-flexbox>
          <yd-flexbox-item>产品名称:{{item.order_name}}</yd-flexbox-item>
          <yd-flexbox-item>产品金额:¥{{item.pay_fee / 100}}</yd-flexbox-item>
      </yd-flexbox>
      <yd-flexbox>
          <yd-flexbox-item>订单编号:{{item.code}}</yd-flexbox-item>
      </yd-flexbox>
      <yd-flexbox>
          <yd-flexbox-item>下单时间:{{item.create_time}}</yd-flexbox-item>
      </yd-flexbox>
      <yd-flexbox>
          <yd-flexbox-item v-if="item.pay_state == '1'">订单状态:已支付</yd-flexbox-item>
          <yd-flexbox-item v-if="item.pay_state == '0'">订单状态:未支付</yd-flexbox-item>
      </yd-flexbox>
      <div class="line"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'myComment',
  data() {
    return {
      checkbox: [],
      delList: [],
      title: '全部订单',
      rate: 4,
      list: [],
      pageNo: 1,
      pageSize: 6,
      show1: false,
      show2: false,
      parameter: this.$route.query.parameter
    }
  },
  mounted: function() {
    this.load(this.parameter);
    this.title = this.$route.query.title;
    if (this.title === '' || this.title === undefined) {
      this.title = '全部订单'
    }
    console.log(this.$route.query);
    console.log('!@!@%#%')
  },
  methods: {
    load(value) {
      this.show1 = false;
      this.show2 = false;
      if (value === '酒店') {
        value = '0'
        this.hdAjax({
          url: this.API.findHLDHOrderList,
          data: {
            pageNo: this.pageNo,
            pageSize: this.pageSize
          },
          success: (resultData) => {
            this.list = resultData.data.results;
          }
        });
      }
      if (value === '线路') {
        value = '1'
        this.hdAjax({
          url: this.API.findXlHLDOrderlist,
          data: {
            pageNo: this.pageNo,
            pageSize: this.pageSize
          },
          success: (resultData) => {
            this.list = resultData.data.results;
          }
        });
      }
      if (value === '景区') {
        value = '2'
        this.hdAjax({
          url: this.API.findHLDJOrderList,
          data: {
            pageNo: this.pageNo,
            pageSize: this.pageSize
          },
          success: (resultData) => {
            this.list = resultData.data.results;
          }
        });
      }
    }
  }
}
</script>


<style scoped>
  body {
    background-color:#fff;
  }
  .top{
    height:50px;
    width:100%;
    text-align:center; 
    line-height:50px;
    font-size:20px;
    background-color:#fff;
    border-bottom:1px solid #F0F0F0;
  }
  .text-center{
    text-align: center
  }
  .text-right{
    text-align: right
  }
  .edit{
    margin-right:10px;
    font-size:15px;
    color:blue
  }
  .comment-body{
    margin-bottom:5px;
    /* height: 410px; */
    background-color:#ffffff;
    padding:10px;
    /* margin-bottom:10px; */
    /* height:200px; */
  }
  .comment-user{
    width:60px;
    /* height:60px; */
    float:left;
  }
  .user-img{
    width:60px;
    height:60px;
    border-radius: 30px;
  }
  .content{
    /* width:20%; */
    float:left;
    margin-left:10px;
    width:76%
  }
  .username{
    font-size:.3rem;
    margin-bottom:5px;
  }
  /* .score{
    float:left
  } */
  .create-time{
    float: right;
    color:grey;
  }
  .comment-content{
    width:85%;
    margin: 10px 10px 10px 0;
  }
  .user-comment-img{
    width:85%;
    height:200px;
  }
  .jump-content{
    width:100%;
    height:80px;
    background-color:	#F0F0F0;
    margin-top:10px;
    /* padding-bottom:10px;     */
    /* margin-bottom:10px; */
  }
  .jump-img{
    width:70px;
    height:70px;
    margin-top:5px;
    margin-left:5px;
    float:left;
    border-radius:5px;
  }
  .jump-place-name{
    font-size:.28rem;
    float:left;
    padding-top:10px;
    padding-left:10px;
    width: 60%;
    height: 100%;
  }
  /* .line{
    margin-top:10px;
    border-bottom: 10px solid 	#F0F0F0	;
  } */
  .thumbs-up{
    float:right;
    margin-top:5px;
    margin-right:20px;
    /* margin-bottom:20px; */
    width:60px;
    height:25px;
    border: 1px solid #bbbbbb;
    border-radius: 40px;
    text-align:center;
  }
  .see{
    float:left;
    margin-top:10px;
    margin-left:20%;
    font-size:.25rem;
    color:	#ADADAD;
  }
  .checkdiv{
  float:left;
  height:50%;
  line-height:60px;
  margin-left:0px
  }
</style>
